<template>
	<view class="content">
		<view class="box"
			:style='{"padding":"48rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 5%","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","width":"90%","borderStyle":"solid","height":"auto"}'>
			<view class="logo"
				:style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'
				v-if="false">
				<image
					:style='{"padding":"0","boxShadow":"0 0 0px #59f43e","margin":"0 auto","borderColor":"#ccc","borderRadius":"40rpx","borderWidth":"2rpx","width":"160rpx","borderStyle":"solid","url":"http://codegen.caihongy.cn/20220220/038dfb34101a400aa5be864d2932ba4a.jpg","isShow":false,"height":"160rpx"}'
					src='http://codegen.caihongy.cn/20220220/038dfb34101a400aa5be864d2932ba4a.jpg' mode="aspectFill">
				</image>
			</view>
			
			
			
			<view
				:style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'
				v-if="tableName=='chuangkouyuangong'" class="uni-form-item uni-column">
				<input
					:style='{"padding":"0 24rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(54, 111, 112, 1)","backgroundColor":"#fff","color":"#333","textAlign":"left","borderRadius":"40rpx","borderWidth":"2rpx","width":"100%","fontSize":"28rpx","borderStyle":"solid","height":"88rpx"}'
					v-model="ruleForm.yuangongxingming" type="text" class="uni-input" name="" placeholder="用户姓名" />
			</view>
			<view
				:style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'
				v-if="tableName=='chuangkouyuangong'" class="uni-form-item uni-column">
				<input
					:style='{"padding":"0 24rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(54, 111, 112, 1)","backgroundColor":"#fff","color":"#333","textAlign":"left","borderRadius":"40rpx","borderWidth":"2rpx","width":"100%","fontSize":"28rpx","borderStyle":"solid","height":"88rpx"}'
					v-model="ruleForm.mima" type="password" class="uni-input" name="" placeholder="密码" />
			</view>
			<view
				:style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'
				v-if="tableName=='chuangkouyuangong'" class="uni-form-item uni-column">
				<input
					:style='{"padding":"0 24rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(54, 111, 112, 1)","backgroundColor":"#fff","color":"#333","textAlign":"left","borderRadius":"40rpx","borderWidth":"2rpx","width":"100%","fontSize":"28rpx","borderStyle":"solid","height":"88rpx"}'
					v-model="ruleForm.mima2" type="password" class="uni-input" name="" placeholder="确认密码" />
			</view>
			<view
				:style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'
				v-if="tableName=='chuangkouyuangong'" class="uni-form-item uni-column">
				<picker @change="chuangkouyuangongxingbieChange" :value="chuangkouyuangongxingbieIndex"
					:range="chuangkouyuangongxingbieOptions">
					<view
						:style='{"padding":"0 20rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(54, 111, 112, 1)","backgroundColor":"rgba(0,0,0,0)","color":"#333","textAlign":"left","borderRadius":"40rpx","borderWidth":"2rpx","width":"100%","lineHeight":"80rpx","fontSize":"28rpx","borderStyle":"solid"}'
						class="uni-input">{{ruleForm.xingbie?ruleForm.xingbie:"请选择性别"}}</view>
				</picker>
			</view>
			<view
				:style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'
				v-if="tableName=='chuangkouyuangong'" class="uni-form-item uni-column">
				<input
					:style='{"padding":"0 24rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(54, 111, 112, 1)","backgroundColor":"#fff","color":"#333","textAlign":"left","borderRadius":"40rpx","borderWidth":"2rpx","width":"100%","fontSize":"28rpx","borderStyle":"solid","height":"88rpx"}'
					v-model="ruleForm.lianxidianhua" type="text" class="uni-input" name="" placeholder="联系电话" />
			</view>
			
			<button class="btn-submit" @tap="register" type="primary"
				:style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"20rpx 0","borderColor":"#ccc","backgroundColor":"rgba(54, 111, 112, 1)","borderRadius":"80rpx","color":"rgba(255, 255, 255, 1)","borderWidth":"0","width":"100%","fontSize":"32rpx","borderStyle":"solid","height":"88rpx"}'>注册</button>
	
	</view>
</view>
</template>

<style>
	.btn-submit {
		height: auto !important;
		line-height: 88rpx;
	}
</style>
<script>
	export default {
		data() {
			return {
				chuangkoufuzerenxingbieOptions: [],
				chuangkoufuzerenxingbieIndex: 0,
				chuangkouyuangongxingbieOptions: [],
				chuangkouyuangongxingbieIndex: 0,
				ruleForm: {},
				emailcode: "",
				tableName: ""
			}
		},
		async onLoad() {
			let res = [];
			let table = uni.getStorageSync("loginTable");
			this.tableName = table;

			// 自定义下拉框值
			if (this.tableName == 'chuangkoufuzeren') {
				this.chuangkoufuzerenxingbieOptions = "男,女".split(',');
				this.ruleForm.xingbie = this.chuangkoufuzerenxingbieOptions[0]
			}
			// 自定义下拉框值
			if (this.tableName == 'chuangkouyuangong') {
				this.chuangkouyuangongxingbieOptions = "男,女".split(',');
				this.ruleForm.xingbie = this.chuangkouyuangongxingbieOptions[0]
			}

			this.styleChange()
		},
		methods: {

			// 下拉变化
			chuangkoufuzerenxingbieChange(e) {
				this.chuangkoufuzerenxingbieIndex = e.target.value
				this.ruleForm.xingbie = this.chuangkoufuzerenxingbieOptions[this.chuangkoufuzerenxingbieIndex]
			},
			// 下拉变化
			chuangkouyuangongxingbieChange(e) {
				this.chuangkouyuangongxingbieIndex = e.target.value
				this.ruleForm.xingbie = this.chuangkouyuangongxingbieOptions[this.chuangkouyuangongxingbieIndex]
			},

			styleChange() {
				this.$nextTick(() => {
					// document.querySelectorAll('.uni-input .uni-input-input').forEach(el=>{
					//   el.style.backgroundColor = this.registerFrom.content.input.backgroundColor
					// })
				})
			},
			// 获取uuid
			getUUID() {
				return new Date().getTime();
			},
			// 注册
			async register() {
				if (`chuangkoufuzeren` == this.tableName && (this.ruleForm.mima != this.ruleForm.mima2)) {
					this.$utils.msg(`两次密码输入不一致`);
					return
				}
				if (`chuangkoufuzeren` == this.tableName && this.ruleForm.lianxidianhua && (!this.$validate.isMobile(
						this.ruleForm.lianxidianhua))) {
					this.$utils.msg(`联系电话应输入手机格式`);
					return
				}
				if (`chuangkouyuangong` == this.tableName && (this.ruleForm.mima != this.ruleForm.mima2)) {
					this.$utils.msg(`两次密码输入不一致`);
					return
				}
				if (`chuangkouyuangong` == this.tableName && this.ruleForm.lianxidianhua && (!this.$validate.isMobile(
						this.ruleForm.lianxidianhua))) {
					this.$utils.msg(`联系电话应输入手机格式`);
					return
				}
				await this.$api.register(`${this.tableName}`, this.ruleForm, this.emailcode);
				this.$utils.msgBack('注册成功');;
			}
		}
	}
</script>

<style lang="scss" scoped>
	$color-primary: #b49950;

	.content {
		height: calc(100vh - 44px);
		overflow: auto;
	}

	.content:after {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		content: '';
		background-image: url(http://codegen.caihongy.cn/20220220/5adef3207acc4ae5ae1eac03d6c3a4da.png);
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
	}

	.logo {
		text-align: center;

		image {
			height: 200upx;
			width: 200upx;
			margin: 0 0 60upx;
		}
	}

	.uni-form-item {
		margin-bottom: 40upx;
		padding: 0;

		.uni-input {
			font-size: 30upx;
			padding: 7px 0;
		}
	}

	button[type="primary"] {
		background-color: $color-primary;
		border-radius: 0;
		font-size: 34upx;
		margin-top: 60upx;
	}

	.links {
		text-align: center;
		margin-top: 40upx;
		font-size: 26upx;
		color: #999;

		view {
			display: inline-block;
			vertical-align: top;
			margin: 0 10upx;
		}

		.link-highlight {
			color: $color-primary
		}
	}

	.picker-select-input {
		line-height: 88rpx;
	}
</style>
